<template>
  <page-wrap
    :show-top="showTop"
    stay-still
    back
    hide-tab
    :dark="false"
    txtcolor="#fff"
    title="激活职途卡"
    :bg-color="uNavColor"
  >
    <view class="container">
      <view class="form-box">
        <u-form ref="uForm" :model="form">
          <u-form-item label="卡号" prop="cardNo">
            <view class="inputWithScan">
              <u-input
                placeholder="请输入卡号"
                :custom-style="inputStyle"
                v-model="form.cardNo"
              />
              <img
                src="https://img3.job1001.com/ypMp/elan/images/career/scan.svg"
                alt=""
                class="scanIcon"
                @click="handleScanCode"
              />
            </view>
          </u-form-item>
          <u-form-item label="密码" prop="cardKey">
            <u-input placeholder="请输入密码" v-model="form.cardKey" />
          </u-form-item>
        </u-form>
      </view>
      <view style="margin: 32px 16px">
        <u-button shape="circle" type="primary" @click="onSubmit"
          >提 交</u-button
        >
      </view>
      <view class="tips">
        <section class="tips-line">
          <view class="dot"></view>
          <text>每个职途卡仅可激活一次，请确认登录账号是否正确</text>
        </section>
        <section class="tips-line">
          <view class="dot"></view>
          <text
            >激活成功后即可获得全部功能权限，具体权益内容可在顶部栏“我的权益”进入查看</text
          >
        </section>
        <section class="tips-line">
          <view class="dot"></view>
          <text
            >如使用时遇到问题，可通过卡面上联系方式或线下服务人员联系我们</text
          >
        </section>
      </view>
    </view>
    <ActPromotion
      :show="showActPromotion"
      :backgroundSrc="backgroundSrc"
      :closeable="false"
      width="580rpx"
      height="900rpx"
      imgHeight="90%"
      :fade="false"
      imgMode="aspectFit"
    >
      <view slot="footer" class="footer-container">
        <view class="footer" @click="handleClose">
          <u-icon name="close" color="#646363" size="34"></u-icon>
        </view>
      </view>
    </ActPromotion>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
    <u-toast ref="uToast" />
  </page-wrap>
</template>

<script>
import { cardBinding } from '@/api/modules/career';
import LoginDialog from '@/components/LoginDialog';
import ActPromotion from '@/components/activities/activitiePromotion.vue';
export default {
  emits: ['updateBindStatus'],
  components: { ActPromotion, LoginDialog },
  data() {
    return {
      uNavColor: this.$uNavColor,
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      backgroundSrc: this.$imgBaseSelf + 'career/activity/ShenZhen_Uni.png',
      form: {
        cardNo: '',
        cardKey: '',
        personName: '',
        stuNum: ''
      },
      rules: {
        cardNo: [
          {
            required: true,
            message: '请输入卡号',
            trigger: ['change', 'blur']
          }
        ],
        cardKey: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['change', 'blur']
          }
        ]
      },
      inputStyle: {
        height: '40rpx'
      },
      showTop: false,
      showActPromotion: false
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad(opt) {
    console.log(opt, 'opt');
    // 这个 hasWelcome 是在微信公众平台的小程序码中直接设置的参数，用来判断是否显示活动弹窗
    const { hasWelcome } = opt;
    if (hasWelcome && hasWelcome == 'true') {
      this.showActPromotion = true;
    }
  },
  onShow() {
    const scanCardInfo = uni.getStorageSync('scanCardInfo');
    if (scanCardInfo) {
      if (!scanCardInfo.cardNo && !scanCardInfo.cardKey) {
        uni.showToast({
          icon: 'none',
          title: '无法识别卡号密码，请保证图片清晰度',
          duration: 1000
        });
      } else {
        uni.showToast({
          icon: 'none',
          title: '识别成功！请核对卡号密码！',
          duration: 1000
        });
        this.form.cardNo = scanCardInfo.cardNo;
        this.form.cardKey = scanCardInfo.cardKey;
      }
      uni.removeStorageSync('scanCardInfo');
    }
  },
  onPageScroll(res) {
    this.showTop = res.scrollTop > 0;
  },
  methods: {
    loginSuccessBack() {
      this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
      this.onSubmit();
    },
    handleClose() {
      this.showActPromotion = false;
    },
    handleScanCode() {
      uni.navigateTo({
        url: `/pagesSub/userCenter/careerPath/scanCard/index`
      });
    },
    onSubmit() {
      if (!this.personId) {
        this.$refs.loginDialog.setVisibility(true);
        return;
      }
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          try {
            const params = {
              cardNo: this.form.cardNo,
              cardKey: this.form.cardKey
            };
            const res = await cardBinding(params);
            if (res.code == 200) {
              uni.redirectTo({
                // url: "/pagesSub/userCenter/careerPath/activateCareerPathCard/stepTwo", // 这一步已经不需要了，因为后端会自动修改名字，直接跳转到职途首页
                url: '/pagesSub/userCenter/careerPathV2/index'
              });
            } else {
              this.$refs.uToast.show({
                title: res.status_desc,
                duration: 1500
              });
              // 如果已经绑过卡，则直接跳转到职途首页
              if (
                res.code == 201 &&
                res.status_desc.indexOf('您已绑定了卡') >= 0
              ) {
                setTimeout(() => {
                  uni.redirectTo({
                    url: '/pagesSub/userCenter/careerPathV2/index'
                  });
                }, 1500);
              }
            }
          } catch (err) {
            this.$refs.uToast.show({
              title: err.message,
              duration: 2000
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background: #fff;
}
.form-box {
  margin: 32px;
  .inputWithScan {
    display: flex;
    justify-content: space-between;
    .scanIcon {
      width: 60rpx;
      height: 60rpx;
    }
  }
}
.tips {
  padding: 32rpx;
  color: #888;
  &-line {
    display: flex;
    padding-bottom: 16rpx;
    .dot {
      width: 10rpx;
      height: 10rpx;
      flex-shrink: 0;
      border-radius: 50%;
      margin-top: 14rpx;
      background: #888;
      margin-right: 16rpx;
    }
  }
}
.footer-container {
  display: flex;
  justify-content: center;
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: #aeaeae;
  }
}
</style>
